<template>
  <div>
    <headpage username="返回" routername="loginpage"></headpage>
    <div class="register">
      <input class="form-control" type="text" placeholder="用户名" v-model="username">
      <input class="form-control" type="password" placeholder="密码" v-model="password1">
      <input class="form-control" type="password" placeholder="确认密码" v-model="password2">
      <select class="form-control" v-model="identity">
        <option>请选择注册身份</option>
        <option>老板</option>
        <option>员工</option>
      </select>
      <button class="btn btn-mini btn-success"  @click="emit" :disabled="flag">提交</button>
    </div>
  </div>
</template>

<script>
  import headpage from "./headpage.vue"
  export default {
    name: "register",
    components: {
      headpage
    },
    data(){
      return{
        username:"",
        password1:"",
        password2:"",
        identity:""
      }
    },
    computed:{
      flag(){
        var k=true
        if(this.password1!=""&&this.password2!=""&&this.password1==this.password2&&this.identity!=""){
          k=false
        }
        else{
          k=true
        }
        return k
      }
    },
    methods:{
      emit(){
        if(this.identity=="员工")
        {
          var url=this.HOST+"/addEmployee?"+"employeeName="+this.username+"&employeePassword="+this.password1
        }else{
          var url=this.HOST+"/addBoss?"+"bossName="+this.username+"&bossPassword="+this.password1
        }
         this.$axios.get(url).then(res=>{
           console.log(res)
         },err=>{
           console.log(err)
         })
         alert("注册成功")
         this.$router.push({
           name:"loginpage"
         }).catch(err=>err)
      }
    },
  }
</script>

<style scoped="scoped">
  .register {
    width: 60%;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 100px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
  }

  .register input,
  select {
    margin-bottom: 20px;
  }
</style>
